<template>
  <div class="page-home">
    <div class="page-home__view">
      <router-view></router-view>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item v-for="tab in tabbars" :key="tab.id" :to="tab.to">
        <i slot="icon" :class="['iconfont', tab.icon]"></i>
        {{ tab.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar).use(TabbarItem)
export default {
  name: 'Home',
  data() {
    return {
      active: 3,
      tabbars: [
        {
          id: 1,
          name: '首页',
          icon: 'icon-dianying',
          to: '/home'
        },
        {
          id: 2,
          name: '分类',
          icon: 'icon-xinyongqia',
          to: '/classify'
        },
        {
          id: 3,
          name: '购物车',
          icon: 'icon-pingjia',
          to: '/mall'
        },
        {
          id: 4,
          name: '我的',
          icon: 'icon-wode',
          to: '/personal'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.page-home {
  &__view {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
